<!-- 测试组件：演示组件透传功能 -->
<script setup>
  import { useAttrs } from 'vue'

  const props = defineProps({
    name: String,
  })
  console.log('test-demo-01 props:', props)

  // 获取到多余的（没有定义的属性和事件）属性和事件
  // Tips: 在小程序中，只能拿到多余的属性，拿不到多余的事件，浏览器中是没问题的
  const attrs = useAttrs()
  console.log('test-demo-01 attrs:', attrs)
</script>

<template>
  <!-- 除了在props中定义的属性以外，多余的会全部透传给【根元素】 -->
  <!-- 事件也会透传 -->
  <!-- 可以通过 :age="obj.age" :sex="obj.sex" -->
  <!-- 上面的代码可以写成一个属性绑定，v-bind="obj"， 这个和上面的代码等价 -->
  <test-demo-02 v-bind="attrs"></test-demo-02>
</template>

<style></style>
